<template>
  <van-overlay :show="isShow" @click="onClick" z-index="9999999999">
    <div class="qrPop flexCenter">
      <div class="p_box" @click.stop>
        <div class="top flexCenter">
          <div class="t_left">
            <div>微信扫描二维码</div>
            <div style="margin-top: 20rpx; font-size: 34rpx; color: #5eaaf8">保存我的联系方式</div>
          </div>
          <template v-if="popData?.wxImgPath">
            <img
              :src="popData && popData.wxImgPath ? utils.baseUrl + popData.wxImgPath : ''"
              alt=""
              @click.stop="
                utils.previewImage({
                  urls: [utils.baseUrl + popData.wxImgPath],
                  showmenu: true,
                })
              "
            />
          </template>
        </div>
        <div class="center flexCenter">
          <div
            class="flexCenter"
            v-for="(item, index) in qrData"
            :key="index"
            :style="{ marginBottom: index < 2 ? '40rpx' : 0 }"
          >
            <img :src="item.icon" alt="" />
            <div style="color: #0277ef" @click.stop="clickItem(item)">
              {{ item?.title + item?.name }}
            </div>
          </div>
          <div class="btn" @click.stop="onClick">我知道了</div>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script setup lang="ts">
import { onShow } from "@dcloudio/uni-app";
import { ref, watch, computed } from "vue";
import utils from "@/utils";
/**
 * 组件通讯
 */
// 获取父组件传输过来数据
const prop = defineProps({
  isShow: {
    type: Boolean,
    default: true,
  },
  imgUrl: {
    type: String,
    default: "",
  },
  popData: {
    type: Object,
    default: {},
  },
});
/**
 *
 */
const clickItem = (v: any) => {
  if (v.title == "联系方式：") {
    utils.makePhoneCall(v.name);
  }
};
// 通知父组件
const emit = defineEmits(["onChange"]);
const onClick = () => {
  emit("onChange");
};
const qrData = ref([
  { icon: "/static/icon/manage.png", title: "服务经理：", name: "" },
  { icon: "/static/icon/chat.png", title: "微信号：", name: "" },
  { icon: "/static/icon/phone.png", title: "联系方式：", name: "" },
]);
const a = computed(() => {
  return prop.popData;
});
watch(
  a,
  () => {
    qrData.value[0].name = prop.popData?.userName || "";
    qrData.value[1].name = prop.popData?.wxNo || "";
    qrData.value[2].name = prop.popData?.loginAccount || "";
  },
  { deep: true }
);
</script>

<style lang="less">
.qrPop {
  position: relative;
  height: 100%;
  .p_box {
    width: 684rpx;
    background: #fff;
    border-radius: 19rpx;
    overflow: hidden;
    transform: translateY(-66rpx);
    .top {
      padding: 40rpx 68rpx;
      background-color: #edf4ff;
      .t_left {
        margin-right: 52rpx;
        font-size: 48rpx;
        color: #0277ef;
      }
      image {
        width: 140rpx;
        height: 140rpx;
      }
    }
    .center {
      flex-direction: column;
      padding: 50rpx 0 54rpx;
      .flexCenter {
        justify-content: flex-start;
        width: 100%;
        padding-left: 104rpx;
      }
      image {
        width: 84rpx;
        height: 84rpx;
        margin-right: 24rpx;
        border-radius: 50%;
      }
      view {
        font-size: 34rpx;
        color: #0277ef;
      }
      .btn {
        padding: 32rpx 136rpx;
        margin-top: 58rpx;
        background: #3975f6;
        border-radius: 20rpx;
        color: #ffffff;
      }
    }
  }
}
</style>
